<template>
  <div>
    <el-form ref="shareToCommunity" class="shareToCommunity" :rules="rules" label-position="left" label-width="150px" :model="shareToCommunity" style="margin-bottom: 20px">
      <el-form-item label="Share to Community" prop="uploadCommunity">
        <el-switch
            v-model="shareToCommunity.uploadCommunity">
        </el-switch>
      </el-form-item>
      <el-form-item label="Bot name" prop="botName" v-if="resourceType==='Bot'">
        <el-input v-model="shareToCommunity.botName"></el-input>
      </el-form-item>
      <el-form-item label="Company name" prop="companyName">
        <el-input v-model="shareToCommunity.companyName"></el-input>
      </el-form-item>
      <el-form-item label="Company website" prop="companyWebsite">
        <el-input v-model="shareToCommunity.companyWebsite"></el-input>
      </el-form-item>
    </el-form>
    <el-button type="primary" size="mini" @click="save" v-loading="loading">Save</el-button>
    <el-button type="text" @click="cancel">Cancel</el-button>
  </div>
</template>

<script>
import { checkBotName } from '@/api/new'
import { symbolReg } from '@/components/storybook/utilties/reg'
import { debounce } from 'lodash'
export default {
  name: 'shareToCommunity',
  props: ['shareToCommunity', 'dialogVisible', 'loading','resourceType'], 
  data () {
    const isUrl = (rule, value, callback) => {
      if (!value) {
        callback()
      } else {
        const reg = /^([hH][tT]{2}[pP]:\/\/|[hH][tT]{2}[pP][sS]:\/\/)(([A-Za-z0-9-~]+)\.)+([A-Za-z0-9-~\\/])+$/
        if (!reg.test(value)) {
          callback(new Error('The web address must start with HTTPS or HTTP and must be a web address'))
        }
      }
      callback()
    }
    return {
      rules: {
        botName: [{required: true,validator: this.validateName,trigger: 'blur'} ],
        companyName: [{ required: true, message: 'Please enter company name', trigger: 'blur' }],
        companyWebsite: [{ validator: isUrl, trigger: 'blur' }]
      }
    }
  },
  methods: {
     async validateName(rule, value, callback) {
      if (!value) {
        throw new Error('Please enter bot name')
      }
      try {
        const { botName} = this.shareToCommunity
        let params = {
          name:botName
        }
        if(this.shareToCommunity.uploadCommunity){
          params.tenantCode=1001
          params.businessType='Template'
        }
        if (!symbolReg.test(value)) {
          throw new Error(this.$t('validate.isIncludeSymbol'))
        }
        const { data: response } = await checkBotName(params)
        if (response.code !== 0) {
          throw new Error('The name is already exists')
        }
        callback()
      } catch (error) {
        callback(error)
      }
    },
    save: debounce(function () {
      this.$refs['shareToCommunity'].validate((valid) => {
        if (valid) {
          this.$emit('update:shareToCommunity', this.shareToCommunity)
          this.$emit('submit')
        } else {
          return false
        }
      })
    }, 1000, { 'leading': true, 'trailing': false }),
    cancel () {
      this.$emit('update:dialogVisible', false)
    },
    reset () {
      this.$refs['shareToCommunity'].resetFields()
      this.$refs['shareToCommunity'].clearValidate()
    }
  }
}
</script>

<style lang="scss">
.shareToCommunity {
  .el-form-item{
    margin-bottom: 22px
  }
}
</style>
